<template>
    <div class="main-nav">
        <nav-bar class="home-nav">
            <template v-slot:left>
               <slot name="goBack">
                   <div class="home-nav-icon" @click="goBack">
                        <i class="iconfont icon-jiantou"></i>
                    </div>
               </slot>
           </template>

           <template v-slot:center>
               <div class="center-icon">
                   <slot name="center-name"></slot>
               </div>
           </template> 
          
           <!-- <template v-slot:right>
               <div class="home-nav-icon">···</div>
           </template>   -->
        </nav-bar>
    </div>
</template>

<script>
import NavBar from './NavBar.vue'
import {useRouter} from "vue-router"
    export default {
        components:{
            NavBar
        },
        setup(){
            const router = useRouter()
            const goBack = ()=>{
                router.go(-1)
            }
            return {
                goBack
            }
        }
    }
</script>

<style scoped>
.main-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1998;
    transform: translateZ(2px);
}
.home-nav{
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 0.8);
    font-size: 4.533vw;
    font-family: SFProDisplay-Medium;
    /* line-height: 20px; */
    background-color: #0054a6;
    background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
    background-repeat:repeat-y;
    background-size: 100% auto;
}
.home-nav-back{
    font-size: 4.533vw;
}
.home-nav-icon{
    color: #fff;
}
.center-icon{
    color: #fff;
}
</style>